<template>
  <div class="allBox">
    <div class="shopItemBox" v-for="(item,index) in orderListStore.shopItemList" :key="index">
        <div class="shopItemImg">
            <el-image style="width: 180px" :src="item.imgUrl" fit="fill" />
        </div>
        <div class="shopItemDescBox">{{ item.imgName }}</div>
        <div class="shopItemDescBox">{{ item.imgResInfo }}</div>
        <div class="shopItemDescBox">库存量：{{ item.sale_num }}</div>
        <div class="shopItemDescBox"><span style="color: red;">{{ item.imgPrice }}</span></div>
        <div class="deleteShopItemBox" @click="ChangeShopItemEvement(item,index)">
            <Edit class="deleteIconBox"/>
        </div>
    </div>
    <!-- 弹窗区域 -->
    <el-dialog v-model="changeShopItemList" title="修改详情" width="500" center :modal="dialogModal" append-to-body draggable>
        <div style="text-align: center;">
            <el-image style="width: 150px" :src="shopItemInfoTemplate.imgUrl" fit="fill" />
        </div>
        <el-form :model="shopItemInfoTemplate">
            <el-form-item label="商品名：" :label-width="formLabelWidth">
                <el-input v-model="shopItemInfoTemplate.imgName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品介绍：" :label-width="formLabelWidth">
                <el-input v-model="shopItemInfoTemplate.imgResInfo" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                <el-input v-model="shopItemInfoTemplate.imgPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品库存：" :label-width="formLabelWidth">
                <el-input v-model="shopItemInfoTemplate.sale_num" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="forgivChangeShopItem">取消</el-button>
            <el-button type="primary" @click="ChangeShopItemChangeList">
              确认修改
            </el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useOrderListStore } from '../../store/OrderList';
import { ElMessage } from 'element-plus';
import { Edit } from '@element-plus/icons-vue';
import { ref } from "vue";

const orderListStore = useOrderListStore();
let dialogModal = ref(false);
let changeShopItemList = ref(false);
const formLabelWidth = '140px';
//初始
let shopItemInfoTemplate = ref({
    imgName:'',
    imgUrl:'',
    imgResInfo:'',
    imgPrice:'',
    sale_num:''
});
let pointShopItem = 0;

function ChangeShopItemEvement(item,index){
    //修改属性的方法
    // console.log(item,index,'属性值，下标');
    shopItemInfoTemplate.value.imgName = item.imgName;
    shopItemInfoTemplate.value.imgUrl = item.imgUrl;
    shopItemInfoTemplate.value.imgResInfo = item.imgResInfo;
    shopItemInfoTemplate.value.imgPrice = item.imgPrice;
    shopItemInfoTemplate.value.sale_num = item.sale_num;
    pointShopItem = index
    // console.log(shopItemInfoTemplate,'tem');
    //打开弹窗
    changeShopItemList.value = !changeShopItemList.value;
    // console.log(orderListStore.shopItemList[index])
}
function forgivChangeShopItem(){
    changeShopItemList.value = !changeShopItemList.value;
}
function ChangeShopItemChangeList(){
    //修改
    orderListStore.shopItemList[pointShopItem].imgName = shopItemInfoTemplate.value.imgName;
    orderListStore.shopItemList[pointShopItem].imgResInfo = shopItemInfoTemplate.value.imgResInfo;
    //修改价格时判断符号
    let temList = shopItemInfoTemplate.value.imgPrice.split('');
    if(temList.findIndex(r=>r == "¥") == -1){
        shopItemInfoTemplate.value.imgPrice = "¥" + shopItemInfoTemplate.value.imgPrice;
        orderListStore.shopItemList[pointShopItem].imgPrice = shopItemInfoTemplate.value.imgPrice;
    }else{
        orderListStore.shopItemList[pointShopItem].imgPrice = shopItemInfoTemplate.value.imgPrice;
    }
    orderListStore.shopItemList[pointShopItem].sale_num = shopItemInfoTemplate.value.sale_num;
    ElMessage({
        message: '修改成功！',
        type: 'success',
        showClose: true,
    });
    changeShopItemList.value = !changeShopItemList.value;
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.allBox{
  box-sizing: border-box;
  padding: 20px 50px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.shopItemBox{
  width: 250px;
  height: 350px;
  border: 1px dotted #bbb;
  padding: 10px;
  overflow: hidden;
  margin: 5px;
  position: relative;
  border-radius: 10px;
}
.shopItemImg{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}
.shopItemDescBox{
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin: 5px 0 ;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deleteShopItemBox{
  position: absolute;
  top: -1px;
  right: -10px;
  width: 40px;
  height: 30px;
  border: 1px dotted #ccc;
  cursor: pointer;
}
.deleteIconBox{
  width: 30px;
  height: 30px;
  color: rgb(13, 131, 170);
}
</style>